<script lang="ts" setup>
import checkIcon from '@img/check.png'
import checkedIcon from '@img/checked.png'
import * as TagList from '@/pages-sub/components/tag-list.vue'
import { useOrder } from '@/store/order'

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
})
const orderStore = useOrder()
// 标签数组
const tagData = ref([
  {
    value: '0',
    label: '单板',
  },
  {
    value: '1',
    label: '双板',
  },
])
// 选中的温度、底刃、边刃数据
const extra_info = ref({})

// 温度数组
const temperatureArr = ref([
  '0°C~-6°C/32℉~21℉',
  '－4～－12/25℉～10℉',
  '－10～－30/14℉～-22℉',
])
// 底刃数组
const shearBladesCols = ref([
  {
    value: '默认',
    label: '默认',
  },
  {
    value: '0.5',
    label: '0.5',
  },
  {
    value: '0.75',
    label: '0.75',
  },
  {
    value: '1',
    label: '1',
  },
  {
    value: '1.5',
    label: '1.5',
  },
  {
    value: '2',
    label: '2',
  },
])
// 边刃数组
const edgeBladeCols = ref([
  {
    value: '默认',
    label: '默认',
  },
  {
    value: '85',
    label: '85',
  },
  {
    value: '86',
    label: '86',
  },
  {
    value: '87',
    label: '87',
  },
  {
    value: '88',
    label: '88',
  },
  {
    value: '89',
    label: '89',
  },
])

// 获取是否展示单双板显示
const getIsTags = computed(() => {
  const targetArr = props.data.children.map((item: AnyObject) => item.service_target)
  return targetArr.includes('0') && targetArr.includes('1')
})
// 获取明细数据
const getChildren = computed(() => {
  if (!getIsTags.value)
    return props.data.children

  const service_target = props.data.service_target || '0'
  return props.data.children.filter((item: AnyObject) => (item.service_target === service_target || item.service_target === '2'))
})

// 对应服务目标变更（单板、双板）
function handleActive(value: string) {
  props.data.service_target = value
}
// 价格转换2位小数，根据index返回对应的数字
function fixedPrice(price: string, index: number) {
  const newPrice = Number(price).toFixed(2)

  return newPrice.split('.')[index]
}
// 服务明细选项选中状态变更
function handleSelect(item: AnyObject) {
  const select = !item.select
  item.select = select

  setOtherInfo(select, item)
}
// 设置温度或者底刃、边刃的选中值
function setOtherInfo(select: boolean, item: AnyObject) {
  // extra_info 额外信息:0=温度,1=底刃,2=边刃,3-贴膜
  // 温度
  if (item.extra_info.includes('0')) {
    // 取消选中，清除温度选项
    if (!select) {
		item.select_temperature = ''
		setExtraInfo(item, '')
	}
    else if (!item.select_temperature) {
		item.select_temperature = '0°C~-6°C/32℉~21℉'
		setExtraInfo(item, `${item.name}-温度:0°C~-6°C/32℉~21℉`)
	}
  }
  // 底刃、边刃
  if (item.extra_info.includes('1') || item.extra_info.includes('2')) {
    if (!select) {
      item.select_thickness_1 = '默认'
      item.select_thickness_2 = '默认'
	  setExtraInfo(item, '')
    } else {
		setExtraInfo(item, `${item.name}-底刃:默认,边刃:默认`)
	}
    // else if (!item.select_thickness)
  }
}
// 设置选中的温度、底刃、边刃数据
function setExtraInfo(item: AnyObject, value: string) {
	if (value === '') {
		delete extra_info.value[item.id]
	} else extra_info.value[item.id] = value
	
	orderStore.setExtraInfoStore(extra_info.value)
}

// 温度选项
function handleTemperature(item: AnyObject, value: string) {
  item.select_temperature = value
  setExtraInfo(item, `${item.name}-温度:${value}`)
}
// 底刃、边刃选项
function handleThickness(item: AnyObject, index: number) {
	let value = `${item.name}-底刃:默认,边刃:默认`
	if (index === 0) {
		value = value.replace(/底刃:[^,]+/, `底刃:${item.select_thickness_1}`)
	}
	else {
		value = value.replace(/边刃:[^,]+/, `边刃:${item.select_thickness_2}`)
	}

	setExtraInfo(item, value)
}
</script>

<template>
  <wd-collapse-item :title="props.data.name" :name="props.data.name" custom-class="collapse-item">
    <TagList v-if="getIsTags" :tag-data="tagData" :active="props.data.service_target ? props.data.service_target : '0'" tag-width="70px" gap="19px" @change="handleActive" />
    <!-- 明细列表 -->
    <view class="detail-list" :style="{ paddingTop: getIsTags ? '25px' : null }">
      <view v-for="item in getChildren" :key="item.id" class="detail-item">
        <view class="detail-basic">
          <view class="name">
            {{ item.name }}
          </view>

          <view class="action-box" @click="handleSelect(item)">
            <view class="price">
              <text>{{ fixedPrice(item.price, 0) }}</text>
              <text class="decimal">
                .{{ fixedPrice(item.price, 1) }}/次
              </text>
            </view>

            <image class="icon" :class="[{ select: item.select }]" :src="item.select ? checkedIcon : checkIcon" webp />
          </view>
        </view>
        <!-- 温度选项 extra_info 数组内存在 0 -->
        <view v-if="item.extra_info.includes('0') && item.select" class="temperature-list">
          <view
            v-for="tem in temperatureArr"
            :key="tem"
            class="temperature-item" :class="[{ active: item.select_temperature === tem }]"
            @click="handleTemperature(item, tem)"
          >
            {{ tem }}
          </view>
        </view>
        <!-- 底刃、边刃选项 -->
        <view
          v-if="(item.extra_info.includes('1') || item.extra_info.includes('2')) && item.select"
          class="thickness-list"
        >
          <wd-select-picker
            v-model="item.select_thickness_1"
            type="radio"
            :show-confirm="false"
            use-default-slot
            checked-color="#FF844C"
            :columns="shearBladesCols"
			@confirm="handleThickness(item, 0)"
          >
            <view class="thickness-item f-i-c" @click="item.showPopup = true">
              <view class="label">
                底刃
              </view>
              <view class="flex-between">
                <view>{{ item.select_thickness_1 }}</view>
                <wd-icon name="arrow-down" size="18px" color="#FF844C" />
              </view>
            </view>
          </wd-select-picker>
          <wd-select-picker
            v-model="item.select_thickness_2"
            type="radio"
            :show-confirm="false"
            use-default-slot
            checked-color="#FF844C"
            :columns="edgeBladeCols"
			@confirm="handleThickness(item, 1)"
          >
            <view class="thickness-item f-i-c" @click="item.showPopup = true">
              <view class="label">
                边刃
              </view>
              <view class="flex-between">
                <view>{{ item.select_thickness_2 }}</view>
                <wd-icon name="arrow-down" size="18px" color="#FF844C" />
              </view>
            </view>
          </wd-select-picker>
        </view>
      </view>
    </view>
  </wd-collapse-item>
</template>

<style lang="scss" scoped>
	// :deep(.tag-box) {
// 	padding-bottom: 25px;
// }
.detail-list {
  // padding-top: 25px;
  color: #23282c;
  .detail-item {
    & + .detail-item {
      padding-top: 20px;
    }
    .detail-basic {
      display: flex;
      justify-content: space-between;
      font-weight: 400;
    }
    .name {
      font-size: 14px;
      line-height: 18px;
    }

    .action-box {
      padding-left: 15px;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      .price {
        flex-shrink: 0;
        .decimal {
          font-size: 10px;
        }
      }

      .icon {
        flex-shrink: 0;
        width: 12px;
        height: 12px;
        padding-left: 18px;

        &.select {
          height: 10px;
        }
      }
    }
  }

  .temperature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 10px;
    gap: 7px 12px;

    .temperature-item {
      border: 1px solid #989898;
      color: #989898;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 400;
      line-height: 18px;
      padding: 1px 0;
      text-align: center;

      &.active {
        color: #fff;
        background-color: $uni-main-color;
        border-color: $uni-main-color;
      }
    }
  }

  .thickness-list {
    padding-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;

    .thickness-item {
      font-size: 12px;
      .label {
        color: #989898;
        flex-shrink: 0;
      }

      .flex-between {
        flex: 1;
        margin-left: 5px;
        padding: 3px 7px;
        border-radius: 8px;
        background-color: #f8f8f8;
        color: $uni-main-color;
        font-weight: 500;
      }
    }
  }
}
</style>
